<template>
  <el-main>
    <el-header> 进货管理 </el-header>
    <div class="padding" style="margin: 0.5rem">🦉</div>
    <el-table
      :data="
        tableData.filter(
          (data) =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
    >
      <el-table-column align="center" label="图片">
        <template #default="scope">
          <el-image
            style="width: 80px; height: 80px"
            :src="src + scope.row.photo1"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" label="商品名称" prop="name" />
      <el-table-column align="center" label="库存">
        <template #default="scope">
          <el-tag :type="scope.row.inventory > 0 ? 'success' : 'danger'">
            {{ scope.row.inventory }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center">
        <template #header>
          <el-input
            v-model="search"
            size="mini"
            placeholder="请输入商品名称"
            :suffix-icon="Search"
            maxlength="30"
          />
        </template>
        <template #default="scope">
          <el-button type="success" size="mini" @click="addStock(scope.row)"
            >添加</el-button
          >
          <el-button size="mini" type="warning" @click="details(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加模态框 -->
    <el-dialog
      v-model="dialogVisible"
      title="添加进货信息"
      width="30%"
      :before-close="handleClose"
    >
      <div style="margin: 0.5rem">🐫</div>
      <el-form ref="form" :model="purchase" status-icon :rules="rules">
        <el-form-item prop="hander_name" :error="errMsg">
          <el-input
            size="medium"
            v-model="purchase.hander_name"
            placeholder="进货人"
            maxlength="15"
          />
        </el-form-item>
        <el-form-item prop="ditch" :error="errMsg">
          <el-input
            size="medium"
            v-model="purchase.ditch"
            placeholder="进货渠道"
            style="margin: 10px 0"
            maxlength="45"
          />
        </el-form-item>
        <el-form-item prop="quantity" :error="errMsg">
          <el-input
            size="medium"
            v-model="purchase.quantity"
            placeholder="进货数量"
            style="margin-bottom: 10px"
            type="number"
            oninput="if(value.length>25)value=value.slice(0,25)"
          />
        </el-form-item>
        <el-form-item prop="total" :error="errMsg">
          <el-input
            size="medium"
            v-model="purchase.total"
            placeholder="进货总额"
            type="number"
            oninput="if(value.length>55)value=value.slice(0,55)"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addFinal">确定</el-button>
          <el-button type="primary" @click="cancelAddFinal">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 详情模态框 -->

    <el-dialog v-model="dialogTableVisible" title="商品进货详情">
      <el-form ref="form" :model="detail" status-icon>
        <el-scrollbar height="450px">
          <el-table :data="gridData">
            <el-table-column
              type="index"
              :index="indexMethod"
              property="batch"
              label="进货批次"
              align="center"
            ></el-table-column>
            <el-table-column
              property="hander_name"
              label="进货人"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              property="ditch"
              label="进货渠道"
              width="200"
              align="center"
            ></el-table-column>
            <el-table-column
              property="created_at"
              label="进货时间"
              align="center"
            ></el-table-column>
            <el-table-column
              property="quantity"
              label="进货数量"
              align="center"
            ></el-table-column>
          </el-table>
        </el-scrollbar>
      </el-form>
    </el-dialog>
  </el-main>
</template>
<script>
import dayjs from "dayjs";
import { goodsApi, addStockApi, stockApi } from "@/api/admin";
import { defineComponent, ref, reactive, toRefs, onBeforeMount } from "vue";
import { ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";

export default defineComponent({
  setup() {
    const src = ref("/avatars/");
    const search = ref("");
    const dialogVisible = ref(false);
    const dialogTableVisible = ref(false);
    const detail = reactive({ id: "" });
    const tableData = reactive([]);
    // 添加进货信息
    const purchase = reactive({
      hander_name: null,
      ditch: null,
      quantity: null,
      total: null,
      goods_id: "",
    });
    // 详情模态框
    const state = reactive({
      gridData: [
        {
          hander_name: null,
          ditch: null,
          batch: null,
          created_at: null,
          quantity: null,
          inventory: null,
        },
      ],
    });
    // 显示进货销售管理
    onBeforeMount(() => {
      goodsApi().then((res) => {
        Object.assign(tableData, res.data.query.goods_stock);
      });
    });

    // 添加进货信息
    const addStock = (row) => {
      purchase.total = row.total;
      purchase.goods_id = row.id;
      purchase.hander_name = "";
      purchase.ditch = "";
      purchase.quantity = "";
      purchase.total = "";
      dialogVisible.value = true;
    };

    // 完成进货
    const addFinal = () => {
      if (
        purchase.hander_name == null ||
        purchase.ditch == null ||
        purchase.quantity == null ||
        purchase.total == null
      ) {
        ElMessage.error({
          message: "进货失败！",
        });
      } else if (purchase.quantity <= 0 || purchase.total <= 0) {
        ElMessage.error({
          message: "进货数量或总额要大于0！",
        });
      } else {
        addStockApi(purchase).then((res) => {
          if (res.data.success) {
            const newdata = tableData.map((item) => {
              return item.id == res.data.query.user.goods_id
                ? res.data.query.user
                : item;
            });
            console.log(newdata);
            Object.assign(tableData, newdata);
            ElMessage({
              message: "进货成功！",
              type: "success",
            });
          }
        });
        purchase.hander_name = null;
        purchase.ditch = null;
        purchase.quantity = "";
        purchase.total = "";
        dialogVisible.value = false;
      }
    };
    // 取消进货
    const cancelAddFinal = () => {
      purchase.hander_name = "";
      purchase.ditch = "";
      purchase.quantity = "";
      purchase.total = "";
      dialogVisible.value = false;
    };
    // 详情
    const details = (row) => {
      detail.id = row.id;
      dialogTableVisible.value = true;
      stockApi(detail).then((res) => {
        let newData = res.data.query.data;
        newData.forEach((i) => {
          let day_js = dayjs(new Date(i.created_at)).format("YYYY-MM-DD HH:mm");
          i.created_at = day_js;
        });
        state.gridData = [];
        Object.assign(state.gridData, newData);
      });
    };
    // 进货批次
    const indexMethod = (index) => {
      return (index + 1) * 1;
    };
    return {
      search,
      detail,
      purchase,
      tableData,
      dialogVisible,
      dialogTableVisible,
      details,
      addStock,
      addFinal,
      indexMethod,
      cancelAddFinal,
      ...toRefs(state),
      rules: {
        hander_name: [{ required: true, message: "进货人不为空！" }],
        ditch: [{ required: true, message: "进货渠道不为空！" }],
        quantity: [{ required: true, message: "进货数量不为空或无效！" }],
        total: [{ required: true, message: "进货总额不为空或无效！" }],
      },
      Search,
      src,
    };
  },
});
</script>
<style scoped>
.box {
  width: 90%;
  overflow-y: hidden;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  margin: auto;
  margin-top: 20px;
  border-radius: 4px;
  min-height: 36px;
  padding: 20px;
}
.el-header {
  margin-bottom: 0.5rem;
  background-color: #fff;
  padding: 1rem;
  font-size: 2rem;
  font-weight: 900;
}
.el-main {
  background-color: #fff;
  min-height: 100vh;
}
.el-footer {
  background-color: #fff;
  padding: 0.5rem;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.order {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding-right: 8rem;
  height: 1rem;
  padding: 1rem 0;
}
.order > li {
  border-left: 1px solid #ccc;
  padding-left: 2.5rem;
}
.up {
  background-color: rgb(235, 230, 230);
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
}
.up li {
  padding: 0 1rem;
}
.el-table__expanded-cell > p {
  padding: 0 5rem;
}
.details {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.details li {
  margin: 0 3rem;
}
.font {
  font-size: 2rem;
  box-shadow: 2px 2px 2px #ccc;
  font-family: monospace;
  font-weight: bolder;
}
.padding {
  padding: 1rem 2rem 2rem;
}
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-lighter);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-lighter);
}
</style>
<style>
@media screen and (max-width: 600px) {
  .el-dialog {
    margin: 0px;
    width: 100%;
  }
  .cell .el-button--warning {
    margin-left: 0px;
  }
}
</style>
